<template>
  <div class="homecontainer">
    <!-- 搜索条 -->
    <div class="hbanr">
      <div class="hbx">
        <div class="lety">
          <img
            @click="handleOpenKefuDialog"
            src="~@/assets/imgRed/icon_drhai2.png"
          />
          <img
            src="~@/assets/imgRed/icon_drhai_im.png"
            style="margin-left: -1rem; margin-top: 0.7rem; height: 0.3rem"
          />
          <div class="shuru" @click="getsearch">
            <span class="jiao"></span>
            <p>代码/简拼/功能/资讯/数据</p>
          </div>
        </div>
        <div class="rety">
          <span class="yf" style="display: none"></span>
          <span class="kf"></span>
        </div>
      </div>
    </div>
    <div class="content_area">
      <!-- 功能+轮播图 -->
      <div class="content_header">
        <div class="dang">
          <div class="xbox" @click="getHeaderlink1(1)">
            <img src="~@/assets/imgRed/icon_func_10124_dark.png" />
            <p>新股申购</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(2)">
            <img src="~@/assets/imgRed/icon_func_12445.png" />
            <p>在线开户</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(3)">
            <img src="~@/assets/imgRed/icon_func_21240_dark.png" />
            <p>大宗交易</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(4)">
            <img src="~@/assets/imgRed/icon_func_21036_dark.png" />
            <p>VIP抢筹</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(5)">
            <img src="~@/assets/imgRed/icon_func_21028_dark.png" />
            <p>新股抢筹</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(6)">
            <img src="~@/assets/imgRed/icon_func_21072_dark.png" />
            <p>龙虎榜</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(7)">
            <img src="~@/assets/imgRed/icon_func_20003_dark.png" />
            <p>每日停复牌</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(8)">
            <img src="~@/assets/imgRed/icon_func_21074_dark.png" />
            <p>十大成交股</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(9)">
            <img src="~@/assets/imgRed/icon_func_60040_dark.png" />
            <p>每日涨停</p>
          </div>
          <div class="xbox" @click="getHeaderlink1(10)">
            <img src="~@/assets/imgRed/icon_func_21150_dark.png" />
            <p>交易规则</p>
          </div>
        </div>
        <div class="banner_top1">
          <van-swipe
            class="my-swipe"
            :autoplay="5000"
            indicator-color="white"
            v-if="!loading"
          >
            <van-swipe-item v-for="(item, index) in bannerList" :key="index">
              <img :src="item.bannerUrl" alt />
            </van-swipe-item>
          </van-swipe>
        </div>
        <div class="home-notice">
          <van-notice-bar left-icon="volume-o" :scrollable="false" class="home-notice-bar">
            <van-swipe
              vertical
              class="home-notice-swipe"
              :autoplay="3000"
              :show-indicators="false"
            >
              <!-- <van-swipe-item @click="$router.push('/newGg')" v-for="(item, index) in noticeList" :key="index">{{ item.artTitle }}</van-swipe-item> -->
              <van-swipe-item v-for="(item, index) in noticeList" :key="index">{{ item.artTitle }}</van-swipe-item>
            </van-swipe>
          </van-notice-bar>
        </div>
      </div>
      <br>
      <!-- 指数+打新 -->
      <div class="content_footer">
        <div class="hushenwz" style="display: flex; justify-content: space-between; align-items: center;">
          <div style="display: flex; align-items: center;justify-content: flex-start;">
            <div class="dapan_title">上证指数</div>
            <div>
            <span
              class="transaction transaction_status"
              v-if="hushentiao.status === 1"
            >
              交易中
            </span>
              <span
                class="stop transaction_status"
                v-else-if="hushentiao.status === 0"
              >
              停盘
            </span>
            </div>
          </div>
          <div style="display: flex; align-items: center; justify-content: flex-end;">
            <span :class="hushentiao.bl >= 0 ? 'red' : 'green'">
              <span>{{ hushentiao.xj }}</span><span style="margin: 0 0.1rem;">{{ (hushentiao.bl >= 0 ? '+' : '') + hushentiao.bl }}%</span>
            </span>
            <span class="zhangfutiao-toggle-button" @click="handleToggleZhangfutiao">
              <van-icon v-show="!hushentiao.show" name="arrow-up" />
              <van-icon v-show="hushentiao.show" name="arrow-down" />
            </span>
          </div>
        </div>

        <br />
        <div v-show="hushentiao.show" style="margin-bottom: 0.15rem;">
          <div class="hushenmain">
            <div class="zhangfuright">
              <div class="zhangfutiao">
                <div
                  id="up"
                  :style="
                    'width:' +
                      (
                        (hushentiao.zhang /
                          (hushentiao.zhang + hushentiao.die)) *
                        100
                      ).toFixed(2) +
                      '%'
                  "
                ></div>
                <div
                  id="down"
                  :style="
                    'width:' +
                      (
                        (hushentiao.die / (hushentiao.zhang + hushentiao.die)) *
                        100
                      ).toFixed(2) +
                      '%'
                  "
                ></div>
              </div>
            </div>
          </div>
          <div style="display: flex; justify-content: space-between; padding: 0.1rem 0.35rem;">
            <span class="red">涨{{ hushentiao.zhang }}</span>
            <span class="green">跌{{ hushentiao.die }}</span>
          </div>
        </div>

        <div style="width: 100%; display: flex">
          <div style="flex: 1;">
            <img class="new_add1" :src="wapIndexImg" @click="targetUrl" />
          </div>

          <div
            class="hot_news"
            style="
              display: flex;
              flex-direction: column;
              flex: 1;
              height: 6rem;
              margin-left: 0.2rem;
            "
          >
            <div
              style="
                height: 50%;
                background-color: rgb(240, 240, 240);
                border-radius: 0.3rem;
                display: flex;
                flex-direction: column;
              "
            >
              <div style="display: flex; align-items: center;">
                <img
                  style="height: 1rem; width: 1rem; padding: 0.2rem"
                  src="~@/assets/home/huo.png"
                />

                <span style="font-size: 0.4rem; font-weight: bold">
                  热点头条
                </span>
              </div>
              <div
                style="margin: 0 0.3rem; font-size: 0.4rem; overflow: hidden; text-overflow: ellipsis; line-clamp: 4;display: -webkit-box; -webkit-box-orient: vertical;"
                @click="getnewsdetail1()"
              >
                {{ noticebar }}
              </div>
            </div>
            <div
              style="
                display: flex;
                flex-direction: column;
                height: 50%;
                background-color: rgb(240, 240, 240);
                border-radius: 0.3rem;
                margin-top: 0.2rem;
              "
            >
              <div style="display: flex; align-items: center">
                <img
                  style="height: 1rem; width: 1rem; padding: 0.2rem"
                  src="~@/assets/imgRed/icon_func_10124_dark.png"
                />
                <span style="font-size: 0.4rem; font-weight: bold">
                  今日打新
                </span>
              </div>
              <div style="display: flex; height: 100%">
                <div
                  style="
                    width: 50%;
                    background-color: rgb(255, 255, 255);
                    border-radius: 0.15rem;
                    margin: 0 0 0.3rem 0.3rem;
                  "
                >
                  <div
                    style="display:flex; align-items: center; justify-content: center;font-weight: bold; font-size: 0.55rem; height: 60%; padding-top: 0.15rem;"
                  >
                    {{ jrdx.xg || 0 }}
                  </div>
                  <div
                    style="display:flex; align-items: center; justify-content: center; font-size: 0.35rem; color: #9e9fa5; height: 40%; padding-bottom: 0.2rem;"
                  >
                    新股
                  </div>
                </div>
                <div
                  style="
                    width: 50%;
                    background-color: rgb(255, 255, 255);
                    border-radius: 0.15rem;
                    margin: 0 0.3rem 0.3rem 0.3rem;
                  "
                >
                  <div
                    style="display:flex; align-items: center; justify-content: center;font-weight: bold; font-size: 0.55rem; height: 60%; padding-top: 0.15rem;"
                  >
                    {{ jrdx.xz || 0 }}
                  </div>
                  <div
                    style="display:flex; align-items: center; justify-content: center; font-size: 0.35rem; color: #9e9fa5; height: 40%; padding-bottom: 0.2rem;"
                  >
                    新债
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>

        <div class="touti" style="display: none">
          <img
            src=""
          />
          <div class="bofang">
            <van-notice-bar :text="noticebar"></van-notice-bar>
          </div>
        </div>
      </div>
      <div class="news">
        <van-tabs v-model="tabactive" class="ghbn" @click="getNewsList">
          <van-tab title="财经要闻" name="1"></van-tab>
          <van-tab title="经济数据" name="2"></van-tab>
          <van-tab title="全球股市" name="3"></van-tab>
          <van-tab title="7*24全球" name="4"></van-tab>
          <van-tab title="商品资讯" name="5"></van-tab>
          <van-tab title="上市公司" name="6"></van-tab>
          <van-tab title="全球央行" name="7"></van-tab>
        </van-tabs>
        <div class="ganhj"></div>
        <ul class="wul">
          <li
            class="wlis"
            v-for="(item, index) in newsContent1"
            :key="index"
            @click="getnewsdetail(item)"
          >
            <!--img class="li_righ" v-if="item.imgurl" :src="item.imgurl" alt="" -->
            <span class="newslist"></span>
            <div class="li_left tuk">
              <h6>{{ item.title }}</h6>
              <!-- p>{{ new Date(item.addTime) | timeFormat }}</p -->
            </div>
          </li>
        </ul>
      </div>
    </div>
    <van-popup
      round
      v-model="kefuDialog"
      closeable
      position="bottom"
      :style="{ height: '100%' }"
    >
    <iframe :src="kefuDialogUrl" frameborder="0" width="100%" height="100%"></iframe>
    </van-popup>
  </div>
</template>

<script>
import * as api from '@/axios/api'
import { init, dispose } from 'klinecharts'
var timer = null
export default {
  components: {},
  props: {},
  data () {
    return {
      kefuDialog: false,
      kefuDialogUrl: '',
      tabactive: 1,
      newsContent1: [],
      noticebar: '',
      noticebarid: '',
      noticebartime: '',
      bannerList: [],
      hushentiao: {
        show: false,
        xj: 0,
        bl: '0',
        zhang: 0,
        die: 0,
        status: 1
      },
      wapIndexImg: '',
      wapIndexImgTargetUrl: '',
      isshow: true,
      loading: false,
      jrdx: {
        xg: 0,
        xz: 0
      },
      noticeList: []
    }
  },
  mounted () {
    this.getNewsList(1)
    this.getBanner()
    if (this.$route.query.kefuurl) {
      this.getNewkefu(this.$route.query.kefuurl)
    }
    this.stockgetZdfNumber()
    this.getZdfNumber()
    this.getTodayDx()
    this.getInfoSite()
    this.getArtList()
  },
  beforeDestroy () {
    if (timer) {
      clearInterval(timer)
    }
  },
  destroyed: function () {
    dispose('chart-type-k-line')
    this.isshow = false
  },
  methods: {
    getArtList () {
      api.getArtList().then(resp => {
        this.noticeList = resp.data.list
      })
    },
    targetUrl () {
      if (this.wapIndexImgTargetUrl) {
        location.href = this.wapIndexImgTargetUrl
      }
    },
    handleToggleZhangfutiao () {
      this.hushentiao.show = !this.hushentiao.show
    },
    async getTodayDx () {
      let data = await api.getTodayDx()
      this.jrdx = Object.assign(this.jrdx, data.data)
    },
    getsearch () {
      this.$router.push({
        path: '/Searchlist'
      })
    },
    async stockgetZdfNumber () {
      timer = setInterval(() => {
        this.getZdfNumber()
      }, 10000)
    },
    async getZdfNumber () {
      let data = await api.stockgetZdfNumber()
      this.hushentiao = Object.assign(this.hushentiao, {
        ...data.data
      })
    },
    async getBanner () {
      // 获取显示的banner
      let result = await api.getBannerByPlat({
        platType: 'm'
      })
      if (result.status === 0) {
        this.bannerList = result.data
      } else {
        this.$store.commit('elAlertShow', {
          elAlertShow: true,
          elAlertText: result.msg
        })
      }
    },
    async getNewsList (type) {
      let data = await api.queryNewsList(type)
      this.newsContent1 = data.data.list
      this.noticebar = data.data.list[0].title
      this.noticebartime = data.data.list[0].addTime
      this.noticebarid = data.data.list[0].id
    },
    async getNewkefu (kefu) {
      let params = {
        kefu: kefu
      }
      let data = await api.queryNewkefu(params)
    },
    getnewsdetail (item) {
      this.$router.push({
        path: '/newPage',
        query: {
          listid: item.id
        }
      })
    },
    getnewsdetail1 () {
      this.$router.push({
        path: '/newPage',
        query: {
          listid: this.noticebarid
        }
      })
    },
    getHeaderlink (val) {
      if (val == 0) {
        this.$router.push({
          path: '/MyList'
        })
      } else if (val == 1) {
        this.$router.push({
          path: '/trading-list'
        })
      } else if (val == 2) {
        this.$router.push({
          // path: '/jijin'
          path: '/about?e=6'
        })
      } else if (val == 3) {
        this.$router.push({
          // path: '/college'
          path: '/about?e=6'
        })
      } else if (val == 4) {
        api.kfUrl().then(resp => {
          location.href = resp.data
        })
      } else if (val == 5) {
        this.$router.push({
          path: '/openaccount'
        })
      }
    },
    getHeaderlink1 (val) {
      switch (val) {
        case 1:
          this.$router.push({
            path: '/Subscription'
          })
          break
        case 2:
          this.$router.push({
            path: '/authentications'
          })
          break
        case 3:
          this.$router.push({
            path: '/Subscription?idx=4'
          })
          break
        case 4:
          this.$router.push({
            path: '/Subscription?idx=5'
          })
          break
        case 5:
          this.$router.push({
            path: '/Subscription?idx=2'
          })
          break
        case 6:
          this.$router.push({
            path: '/DragonTiger'
          })
          break
        case 7:
          this.$router.push({
            path: '/stopRecovery'
          })
          break
        case 8:
          this.$router.push({
            path: '/topTen'
          })
          break
        case 9:
          this.$router.push({
            path: '/daylimit'
          })
          break
        case 10:
          this.$router.push('/about?e=5')
          break
      }
    },
    async getInfoSite () {
      let data = await api.getInfoSite()
      if (data.status === 0) {
        this.onlineService = data.data.onlineService
        this.wapIndexImgTargetUrl = data.data.wapIndexImgTargetUrl
        this.wapIndexImg = data.data.wapIndexImg

        // 动态设置icon小图标
        try {
          const iconLink = document.querySelector("link[rel*='icon']") || document.createElement('link')
          iconLink.type = 'image/png'
          iconLink.rel = 'shortcut icon'
          iconLink.href = data.data.siteLogo
          document.getElementsByTagName('head')[0].appendChild(iconLink)
        } catch (e) {
          console.error('设置小图标失败')
        }
      } else {
        this.$store.commit('elAlertShow', {
          elAlertShow: true,
          elAlertText: data.msg
        })
      }
    },
    handleOpenKefuDialog () {
      this.kefuDialog = true
      api.kfUrl().then(resp => {
        this.kefuDialogUrl = resp.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
.home-notice {
  padding: 0 0.264rem;
}
.home-notice-bar{
  font-size: 0.35rem;
  height: 1rem;
  /deep/.van-notice-bar__left-icon {
    font-size: 0.4rem;
  }
  .home-notice-swipe{
    height: 1rem;
    line-height: 1rem;
  }
}

.zhangfutiao-toggle-button {
  width: 1rem;
  height: 0.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: #f0f0f0;
  border-radius: 0.2rem;
}

.red {
  font-size: 0.35rem;
  //margin-left: 0.6rem;
  //margin-top: 0.2rem;
  color: #d73d3d;
}

.green {
  font-size: 0.35rem;
  //margin-top: -0.4rem;
  //margin-left: 8rem;
  color: #20b844;
}

.new_add1 {
  border-radius: 0.3rem;
  width: 100%;
  height: 6rem;
}

.new_add2 {
  width: 50%;
}

.newslist {
  background: url("~@/assets/img/icon_hot_fire.png") no-repeat 50%;
  color: white;
  height: 0.6rem;
  width: 0.6rem;
  font-size: 0.5rem;
}

.banner_top1 {
  margin-top: 0.3rem;
  width: 100%;

  img {
    width: 100%;
    height: 100%;
  }

  .van-swipe-item {
    height: 3.0615rem;
    padding: 0 0.264rem;
    border-radius: 0.3rem;
  }

  .van-swipe-item img {
    border-radius: 0.3rem;
  }
}

.homecontainer {
  background: #fff;
  min-height: 100vh;
}

.hbanr {
  width: 100%;
  height: 1.6rem;
  background-size: 100%;
  margin: 0 auto;

  .hbx {
    width: 9.47rem;
    margin: 0 auto;
    height: 1.17rem;
    padding-top: 0.4rem;
    justify-content: space-between;
    display: flex;

    .lety {
      display: flex;

      img {
        width: 0.69rem;
        height: 0.69rem;
        margin-right: 0.4rem;
        margin-top: 0.11rem;
      }

      .shuru {
        width: 7.2rem;
        height: 0.91rem;
        background-color: #f0f0f0;
        border-radius: 0.45rem;
        display: flex;

        span {
          color: gray;
          width: 0.43rem;
          height: 0.43rem;
          background: url("~@/assets/imgRed/img_search_normal2_dark.png")
            no-repeat 50%;
          background-size: 100%;
          margin-left: 0.27rem;
          margin-top: 0.24rem;
        }

        p {
          color: gray;
          font-size: 0.38rem;
          line-height: 0.85rem;
          margin-left: 0.19rem;
        }
      }
    }

    .rety {
      display: flex;
      margin-top: 0.19rem;

      .yf {
        width: 0.51rem;
        height: 0.51rem;
        background: url()
          no-repeat 50%;
        background-size: 100%;
        margin-right: 0.32rem;
      }

      .kf {
        width: 0.63rem;
        height: 0.63rem;
        background: url("~@/assets/imgRed/icon_new_msg_dark.png") no-repeat 50%;
        background-size: 100%;
      }
    }
  }

  .five {
    width: 9.35rem;
    margin: 0 auto;
    display: flex;
    justify-content: space-between;
    margin-top: 0.85rem;

    .danw {
      width: 20%;
      text-align: center;

      img {
        width: 0.85rem;
        height: 0.85rem;
      }

      p {
        font-size: 0.37rem;
        color: #fff;
        margin-top: 0.266rem;
      }
    }
  }
}

.content_area {
  background: #eee;
  // padding: 0.3rem 0.2rem;

  .content_header {
    background: #fff;
    box-shadow: 0 0.05rem 0.14rem 0 rgb(227 227 227);
    border-radius: 0 0 0.266rem 0.266rem;
    padding-bottom: 0.3rem;

    .dang {
      display: flex;
      flex-wrap: wrap;

      .xbox {
        width: 20%;
        text-align: center;
        margin-top: 0.53rem;

        img {
          width: 0.77rem;
          height: 0.77rem;
        }

        p {
          color: #333;
          font-size: 0.35rem;
          margin-top: 0.21rem;
        }
      }
    }

    .banner_top1 {
      padding: 0.3rem 0;
    }
  }

  .content_footer {
    padding: 0.3rem;
    background: #fff;
    box-shadow: 0 0.05rem 0.14rem 0 rgb(227 227 227);
    border-radius: 0.266rem;
  }

  .news {
    background: #fff;
    box-shadow: 0 0.05rem 0.14rem 0 rgb(227 227 227);
    border-radius: 0.266rem;
    padding-top: 0.1rem;
    margin-top: 0.3rem;
  }
}

.zoushit {
  width: 9.37rem;
  height: 2.67rem;
  margin: 14px auto;
  // background: #fff;
  // border: 1px solid #e0e0e0;
  // border-radius: 10px;
  border: 1px solid #e0e0e0;
  padding: 2px;
  border-radius: 10px;
  margin-top: 10px;

  img {
    width: 100%;
    border-radius: 20px;
  }
}

.hushenwz {
  margin: 0 0.3rem;
  font-weight: bold;
  color: rgb(51, 51, 51);
  height: 1rem;

  .dapan_title {
    display: inline-block;
    height: 1rem;
    line-height: 1rem;
    font-size: 0.5rem;
    font-weight: bold;
  }

  .stop {
    // width: 1rem;
    background-color: #ea906c;
  }

  .transaction {
    // width: 1.3rem;
    background-color: #82ff86;
  }

  .transaction_status {
    display: inline-block;
    font-size: 0.27rem;
    text-align: center;
    border-radius: 0.1rem;
    padding: 0.1rem;
    margin-left: 0.1rem;
  }
}

.hushenmain {
  display: flex;
  align-items: center;

  margin: auto;
  justify-content: space-between;

  .zhangfuright {
    margin: 0 0.27rem;
    display: flex;
    align-items: center;
    flex: 1 1 0%;
    font-size: 0.32rem;

    .zhangfutiao {
      width: 100%;
      display: flex;
      align-items: center;
      margin: 0px 5px;

      #up {
        width: 50%;
        height: 7px;
        border-radius: 3px;
        background-image: url();
        background-size: cover;
        background-position: center;
        background-repeat: no-repeat;
      }

      #down {
        width: 50%;
        height: 7px;
        border-radius: 3px;
        background-image: url();
        background-size: cover;
        // background-position: center;
        background-repeat: no-repeat;
      }
    }
  }
}

.touti {
  width: 9.37rem;
  height: 1.07rem;
  background: #fef4db;
  border-radius: 0.266rem;
  margin: 0 auto;
  display: flex;
  margin-top: 0.266rem;

  img {
    width: 1.01rem;
    height: 0.48rem;
    margin-left: 0.32rem;
    margin-top: 0.32rem;
  }

  .bofang {
    color: #eb973c;
    width: 7.74rem;
    font-size: 0.37rem;
    line-height: 1.07rem;
    margin-left: 0.32rem;

    .van-notice-bar {
      height: 1.07rem;
      background: transparent;
      font-size: 0.37rem;
      line-height: 1.07rem;
    }
  }
}

.ghbn {
  margin-top: 0.266rem;

  /deep/ .van-tab--active {
    color: #000 !important;
  }

  /deep/ .van-tab {
    font-weight: 600;
    font-size: 0.44rem !important;
    color: #9e9fa5;
  }

  /deep/ .van-tab {
    font-size: 0.37rem;
  }

  /deep/ .van-tabs__wrap {
    height: 1rem !important;
  }
}

.ganhj {
  height: 0.03rem;
  background: #ececec;
  margin-top: 0.266rem;
}

.wul {
  //width: 8.6rem;
  margin: 0 auto;
  margin-bottom: 2.14rem;

  .wlis {
    //width: 8.6rem;
    display: flex;
    // justify-content: space-between;
    border-bottom: 0.03rem solid #ececec;
    margin-top: 0.37rem;
    padding-bottom: 0.266rem;
    padding-left: 0.15rem;
    padding-right: 0.15rem;

    .li_righ {
      width: 2.3rem;
      height: 1.74rem;
      margin-right: 0.266rem;
    }

    .li_left.tuk {
      margin-left: 0.266rem;
    }

    .li_left {
      flex: 1;
      display: flex;
      h6 {
        flex: 1;
        width: calc(100vw - 1.6rem);
        white-space: nowrap;
        text-overflow: ellipsis;
        overflow: hidden;
        color: #333;
        font-size: 0.37rem;
        line-height: 0.53rem;
        font-weight: 600;
      }

      p {
        color: #999;
        margin-top: 0.16rem;
        font-size: 0.35rem;
      }
    }
  }
}
</style>
